<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车弹窗</title>
<!-- 引入用户页面css -->
<link rel="stylesheet" href="../css/user.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/cart-pop.css">
</head>
<body>
        <!-- 用户头部位置 -->
<div class="header">
    <!-- 版心 -->
    <div class="header-c">
        <ul class="header-items ">
            <li class="item-list actived"><a  href="#" class="item-link">首页</a></li>
            <li class="item-list left"><a  href="#" class="item-link">女装</a></li>
            <li class="item-list  left"><a href="#"  class="item-link">男装</a></li>
            <li class="item-list left"><a  href="#" class="item-link">箱包</a></li>
            <li class="item-list left"><a  href="#" class="item-link">配饰</a></li>
        </ul>
        
        <div class="header-right">
            <a href="#" class="header-cart">
                <span class="cart">我的购物车</span>
                <span class="num">11</span>
                <div class="cart-pop">
                    <ul class="pop-list">
                        <li class="list-item">
                            <img class="pop-img" src="../image/pop-img.png" alt="购物车弹窗图片">
                            <p class="product-desc">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <div class="price-box"> 
                            <span class="product-price">￥699</span>
                            <span class="product-num">x1</span>
                            </div>
                            <p class="size-color">尺码：S&nbsp;&nbsp;&nbsp;颜色：米色</p>
                            <button class="btn-remove">删除</button> 
                            <div class="clear"></div>
                             <div class="split-line"></div>
                        </li>
                      
                        <li class="list-item">
                            <img class="pop-img" src="../image/broadcast1.png" alt="购物车弹窗图片">
                            <p class="product-desc">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <div class="price-box"> 
                            <span class="product-price">￥699</span>
                            <span class="product-num">x1</span>
                            </div>
                            <p class="size-color">尺码：S&nbsp;&nbsp;&nbsp;颜色：米色</p>
                            <button class="btn-remove">删除</button>
                            <div class="clear"></div>
                            <div class="split-line"></div>
                        </li>
                        <li class="list-item">
                            <img class="pop-img" src="../image/product-tuijian.png" alt="购物车弹窗图片">
                            <p class="product-desc">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <div class="price-box"> 
                            <span class="product-price">￥699</span>
                            <span class="product-num">x1</span>
                            </div>
                            <p class="size-color">尺码：S&nbsp;&nbsp;&nbsp;颜色：米色</p>
                            <button class="btn-remove">删除</button>
                            <div class="clear"></div>
                            <div class="split-line"></div>
                        </li>
                        <li class="list-item">
                            <img class="pop-img" src="../image/pop-img.png" alt="购物车弹窗图片">
                            <p class="product-desc">女装 高级轻型羽绒蓬松连帽外套 轻暖便携防水(短款)</p>
                            <div class="price-box"> 
                            <span class="product-price">￥699</span>
                            <span class="product-num">x1</span>
                            </div>
                            <p class="size-color">尺码：S&nbsp;&nbsp;&nbsp;颜色：米色</p>
                            <button class="btn-remove">删除</button>
                            <div class="clear"></div>
                            <div class="split-line"></div>
                        </li>
                    </ul>
                    <div class="look-cart">
                        <p class="look-sum">共13件衣服</p>
                        <button class="look-a-look">查看购物车</button>
                    </div>
                </div>
             </a>
            <a href="#" class="right-link"><img src="../image/setup.png" class="right-img"></a>
        </div>
    </div>
</div>
<!-- 我的订单 -->
<div class="myorder">
    <div class="order-title">
        <p class="user-order">我的订单</p>
        <input type="text" class="order-seacher" placeholder="搜索商品名/商品编号">
    </div>
    <div class="clear"></div>
    <div class="order-center">
        <ul class="order-list">
            <li class="item-function">
                <a href="#" class="function-link">
                    <img class="link-img" src="../image/pending payment.png" alt="待付款">
                    <span class="function-name">待付款</span>
                </a>
            </li>
            <li class="item-function">
                <a href="#" class="function-link">
                    <span class="num setlocation1">2</span>
                    <img class="link-img" src="../image/waiting-goods.png" alt="待收货">
                    <span class="function-name">待收货</span>
                </a>
            </li>
            <li class="item-function">
                <a href="#" class="function-link">
                    <span class="num setlocation2">3</span>
                    <img class="link-img" src="../image/evaluate.png" alt="待评价">
                    <span class="function-name">待评价</span>
                </a>
            </li>
            <li class="item-function">
                <a href="#" class="function-link">
                    
                    <img class="link-img" src="../image/after-sale.png" alt="退换/售后">
                    <span class="function-name">退换/售后</span>
                </a>
            </li>
            <li class="item-function">
                <a href="#" class="function-link">
                    <img class="link-img" src="../image/order.png" alt="全部订单">
                    <span class="function-name">全部订单</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 我的收藏 和我的钱包-->
<div class="mycollect-mywallet">
    <div class="mycollection">
        <p class="collect-title">我的收藏</p>
        <div class="collect-box">
            <a class="inner-item">
                <span class="inner-num">13</span>
                <span  class="inner-text">商品收藏</span>
            </a>
            <a class="inner-item">
                <span class="inner-num">13</span>
                <span class="inner-text">系列收藏</span>
            </a>
        </div>
    </div>
    <div class="mywallet">
        <p class="wallet-title">我的钱包</p>
        <div class="wallet-box">
        <a class="inner-item">
            <span class="inner-num">3张</span>
            <span  class="inner-text">优惠券</span>
        </a>
        <a class="inner-item">
            <span class="inner-num">0.00元</span>
            <span class="inner-text">余额</span>
        </a>
    </div>
</div>
    </div>
</div>
<div class="clear"></div>
</body>
</html>